<template>
    <div>
        <div v-if="$store.state.user.is_seller==0" id="register">
            <h1 id="title">商家信息登记</h1>
            <hr class="title_line">
            <label for="name">姓{{ kongge }}名：<input v-model="register_news.username" class="biaodan2" type="text" id="name"
                    placeholder="输入本人真实姓名"></label><br>
            <label for="ID">身份证号：<input v-model="register_news.ID" class="biaodan2" type="text" id="ID"
                    placeholder="输入本人身份证号"></label><br>
            <label for="age">年{{ kongge }}龄：<input v-model="register_news.age" class="biaodan2" type="number" id="age"
                    placeholder="输入本人真实年龄"></label><br>
            <label for="phone_number">电话号码：<input v-model="register_news.phone_number" class="biaodan2" type="text"
                    id="phone_number" placeholder="输入本人电话号码"></label><br>
            <button @click="submit" id="submit" class="annui">提交</button>{{ kongge }}<button @click="reset" id="reset"
                class="annui">重置</button>
        </div>
        <div v-if="$store.state.user.is_seller==1">
            {{ msg }}
        </div>
    </div>
</template>
                  
<script>
export default {
    data() {
        return {
            msg: "商品管理",
            
            kongge: '\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0',
            register_news: {
                session_id: '',
                username: '',
                ID: '',
                age: 0,
                phone_number: '',

            }
        };
    },
    methods: {
        reset() {     //重置
            this.register_news = {
                session_id: '',
                username: '',
                ID: '',
                age: 0,
                phone_number: ''
            }
        },
        submit() {     //提交
            this.register_news.session_id = this.$auth.getAuthorization();
            if (this.register_news.age == null || this.register_news.ID == '' || this.register_news.phone_number == '' || this.register_news.username == '') {
                alert("有未完成的信息登记");
            } else {
                this.$http.post("/become_merchant/register_seller.php",
                    this.register_news,
                    {
                        header: {
                            'Content-Type': 'application/json'
                        }
                    }).then(res => {
                        console.log(res.data);
                        if (res.data.status == 1) {
                            // this.$store.commit('user/set_', res.data);     //把数据存储到vuex里
                            this.$store.getters['user/set_is_seller'];
                            this.$router.push('/user/merchandise_control');
                            this.refreshPage();
                        } else {
                            console.log("失败，");
                            alert(res.data.message);
                        }

                    }).catch(() => {
                        console.log('失败');
                        alert('失败');
                    });
            }

        },
        limit_age() {
            this.register_news.age = this.register_news.age.replace(/^0+(\d+)/, '$$1').replace(/\D/g, '').substring(0, 3);//年龄限制
            //    (/^0+(\d+)/, '$$1').replace(/\D/g, '').substring(0, 3);     
        },
        refreshPage(){
            location.reload();
        }
        // limit_ID(idCard) {
        //     // this.register_news.ID=this.register_news.ID.replace(/^0+(\d+)/, '$$1').replace(/\D/g, '').substring(0, 3);//年龄限制
        //     const regex = /^[1-9]\d{14}(\d{2}[0-9xX]|[0-9]{3})$$/;
        //     return regex.test(idCard);
        // },
    },
    watch: {
        'register_news.age'() {
            this.limit_age();
            // console.log(newval);
        },

    },
    
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
    padding: 0;
    margin: 0;

    #register {
        padding: 5%;

        /* margin: auto; */
        #title {
            text-align: left;
            font-size: 60px;
            color: black;
        }

        .title_line {
            height: 10px;
            background-color: rgb(255, 0, 0);
            margin-bottom: 2%;
        }

        .biaodan2 {
            margin-top: 30px;
            color: rgb(0, 0, 0);
            font-size: 30px;
        }

        input::placeholder {
            font-size: 25px;
            color: rgb(112, 110, 110);
        }

        label {
            font-size: 30px;
        }

        .annui {
            font-size: 30px;
            width: 20%;
            margin-top: 5%;
        }
    }
}
</style>
                                                                          
